<template>
  <div class="gateway-contant">
    <!-- <transition name="slide" mode="out-in">
      <el-card
        v-show="caretShow"
        class="gateway-contant-left"
        :key="'left-panel'"
      >
        <div class="gateway-contant-left-header">
          <div class="gateway-contant-left-header-name">客户单位</div>
          <div class="gateway-contant-left-header-action">
            <i class="el-icon-refresh"></i>
          </div>
        </div>
        <div class="gateway-contant-business">
          <div
            :class="tabIndex == -1 ? 'tab-item-activetitle' : 'tab-itemtitle'"
            @click="tabClick(-1)"
          >
            <svg-icon
              icon-class="business"
              style="margin-right: 3px"
            ></svg-icon>
            SUITTC平台
          </div>
          <div
            v-for="(item, index) in businessList"
            :key="index"
            :class="tabIndex == index ? 'tab-item-active' : 'tab-item'"
            @click="tabClick(index)"
          >
            <i
              class="el-icon-check"
              v-if="tabIndex == index"
              style="font-weight: 700"
            ></i>
            <svg-icon icon-class="dot" v-else></svg-icon>
            {{ item.name }}
          </div>
        </div>
      </el-card>
    </transition> -->

    <!-- <div
      :class="
        caretShow
          ? 'device-list device-list-widthB'
          : 'device-list device-list-widthS'
      "
    > -->
    <el-collapse-transition>
      <card-search v-if="searchCardShow">
        <el-form label-width="70px" :inline="true" style="position: relative">
          <div v-show="moreSearch">
            <el-form-item label="联网状态">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in NetOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                  clearable
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="btn-search" round icon="el-icon-search" size="medium"
                >搜索</el-button
              >
              <el-button class="btn-search" round icon="el-icon-refresh" size="medium"
                >重置</el-button
              >
            </el-form-item>
          </div>
        </el-form>
      </card-search>
    </el-collapse-transition>

    <CardTable style="height: calc(100vh - 100px)">
      <div class="card-table-header">
        <div class="card-table-header-btns">
          <el-button
            v-if="isSuperAdmin || hasPermission('system:dnGateway:add')"
            class="btn-search"
            size="small"
            icon="el-icon-plus"
            @click="handleClick('add')"
            >添加</el-button
          >
          <el-button
            v-if="isSuperAdmin || hasPermission('system:dnGateway:remove')"
            class="btn-search"
            size="small"
            icon="el-icon-delete"
            :disabled="btnDisabled"
            @click="handleClick('delete')"
            >删除</el-button
          >
          <el-button
            v-if="isSuperAdmin || hasPermission('system:dnGateway:import')"
            class="btn-search"
            size="small"
            icon="el-icon-download"
            @click="handleClick('changeMiniPermissiom')"
            >导入</el-button
          >
          <el-button
            v-if="isSuperAdmin || hasPermission('system:dnGateway:export')"
            class="btn-search"
            size="small"
            icon="el-icon-upload2"
            @click="handleClick('changeMiniPermissiom')"
            >导出</el-button
          >
          <el-input
            v-if="isSuperAdmin || hasPermission('system:dnGateway:list')"
            v-model="input"
            placeholder="请输入序列号/名称/安装位置/备注信息"
            style="width: 330px; margin-left: 10px"
            clearable
            size="small"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <div class="card-table-header-actions">
          <table-action
            :table-header="filteredTableHeader"
            :eye-show="false"
            :search-show="isSuperAdmin || hasPermission('system:dnGateway:list')"
            @check-change="handleCheckChange"
            @search-click="handleSearchClick"
            @init-click="handleInitClick"
          />
        </div>
      </div>

      <el-table
        :key="tableKey"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{ background: '#eff3f8', color: '#333' }"
        stripe
        size="small"
        :max-height="tableHeight"
        @selection-change="handleSelectionChange"
        highlight-selection-row
        border
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          v-for="item in filteredTableHeader"
          v-if="item.visible"
          :key="item.prop"
          :label="item.title"
          :min-width="item.width"
          :prop="item.prop"
          :show-overflow-tooltip="true"
          :align="item.align"
          sortable
          :fixed="item.fixed"
        >
          <template #default="scope">
            <!-- 联网状态 -->
            <span v-if="item.prop === 'personInCharge'">
              <span
                :class="scope.row[item.prop] == '在线' ? 'table-online' : 'table-offline'"
              >
                {{ scope.row[item.prop] }}
              </span>
            </span>
            <span v-else>
              {{ scope.row[item.prop] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <XyPagination
        :total="total"
        :pageSizeNum="pageSize"
        :pageNum="currentPage"
        @pagination="handlerPagination"
      ></XyPagination>
    </CardTable>
    <!-- </div> -->

    <!-- <transition name="fade">
      <div
        v-show="true"
        :class="
          caretShow ? 'left-caret caret-bd-left' : 'left-caret caret-bd-right'
        "
        @click="caretShow = !caretShow"
        :key="'caret'"
      >
        <i class="el-icon-caret-left" v-if="caretShow"></i>
        <i class="el-icon-caret-right" v-else></i>
      </div>
    </transition> -->
    <!-- // 添加网关设备 -->
    <el-dialog
      title="添加网关设备"
      :visible.sync="dialogVisible"
      width="700px"
      custom-class="mini-permissions-dialog dialog-copy"
    >
      <el-form class="dialog-ruleForm" label-width="100px">
        <el-form-item label="所属企业:">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in NetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属项目:">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in NetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属分组:">
          <el-input v-model="value" clearable @focus="onFocus"></el-input>
        </el-form-item>
        <el-form-item label="网关序列号:">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in NetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="网关名称:">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in NetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改分组 -->
    <el-dialog
      title="选择分组"
      :visible.sync="dialogVisibleGruop"
      width="400px"
      custom-class="mini-permissions-dialog"
    >
      <el-card>
        <el-tree
          :data="treeData"
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleGruop = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleGruop = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CardSearch from "@/components/CardSearch";
import CardTable from "@/components/CardTable";
import TableAction from "@/components/TableAction";
import ChartsTable from "@/components/ChartsTable";
import XyPagination from "@/components/XyPagination";
import { hasPermission, isSuperAdmin } from "@/utils/hasBtnPermission";
export default {
  components: {
    CardSearch,
    CardTable,
    TableAction,
    ChartsTable,
    XyPagination,
  },
  data() {
    return {
      tableKey: 0,
      searchCardShow: false,
      moreSearch: true,
      btnDisabled: true,
      input: "",
      tabIndex: -1,
      total: 0,
      currentPage: 1,
      pageSize: 20,
      tableHeight: 550,
      currentTabLabel: "全部类型",
      dialogVisible: false,
      dialogVisibleGruop: false,
      caretShow: true,
      NetOptions: [],
      value: "",
      tableHeader: [
        {
          title: "网关序列号",
          prop: "projectName",
          width: "130",
          visible: true,
          align: "left",
          fixed: true,
        },
        {
          title: "网关名称",
          prop: "projectAdmin",
          width: "100",
          visible: true,
          align: "left",
          fixed: true,
        },
        {
          title: "安装位置",
          prop: "company",
          width: "120",
          visible: true,
          align: "left",
        },
        {
          title: "联网状态",
          prop: "personInCharge",
          width: "100",
          visible: true,
          align: "center",
        },
        {
          title: "带载数量",
          prop: "totleNum",
          width: "100",
          visible: true,
          align: "center",
        },
        {
          title: "在线数量",
          prop: "onlineNum",
          width: "100",
          visible: true,
          align: "center",
        },
        {
          title: "离线数量",
          prop: "offlineNum",
          width: "100",
          visible: true,
          align: "center",
        },
        {
          title: "信号强度",
          prop: "address",
          width: "100",
          visible: true,
          align: "center",
        },
        {
          title: "高位地址",
          prop: "hign",
          width: "100",
          visible: true,
          align: "center",
        },
        {
          title: "无线信道",
          prop: "road",
          width: "100",
          visible: true,
          align: "center",
        },
        {
          title: "网关扩频因子",
          prop: "kuo",
          width: "130",
          visible: true,
          align: "center",
        },
        {
          title: "备注信息",
          prop: "mark",
          width: "130",
          visible: true,
          align: "center",
        },
      ],
      tableData: [
        {
          projectName: "KTWG15980001",
          projectAdmin: "智能空调1",
          company: "香缇澜山二期",
          totleNum: "-",
          onlineNum: "-",
          offlineNum: "空调交流lora",
          personInCharge: "在线",
          address: "21.9℃",
        },
      ],
      multipleSelection: [],
      activeIndex: 0,
      businessList: [
        { name: "研发测试账号" },
        { name: "内蒙古华控科技有限公司" },
        { name: "中华通信系统有限责任公司" },
        { name: "研发测试账号" },
        { name: "内蒙古华控科技有限公司" },
        { name: "中华通信系统有限责任公司" },
        { name: "研发测试账号" },
        { name: "内蒙古华控科技有限公司" },
        { name: "中华通信系统有限责任公司" },
        { name: "研发测试账号" },
        { name: "内蒙古华控科技有限公司" },
        { name: "中华通信系统有限责任公司" },
        { name: "研发测试账号" },
        { name: "内蒙古华控科技有限公司" },
        { name: "中华通信系统有限责任公司" },
      ],
      treeData: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  computed: {
    filteredTableHeader() {
      if (this.currentTabLabel !== "全部类型") {
        return this.tableHeader.filter((item) => item.title !== "子设备类型");
      } else {
        return this.tableHeader;
      }
    },
    isSuperAdmin() {
      return isSuperAdmin();
    },
  },
  mounted() {
    this.calculateTableHeight();
    this.loadDictData("sys_networking_status", "NetOptions");
    this.initTable();
  },
  methods: {
    initTable() {},
    tabClick(index) {
      this.tabIndex = index;
    },
    handlerPagination(page) {
      this.currentPage = page.pageNum;
      this.pageSize = page.pageSize;
      this.initTable();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.multipleSelection.length > 0) {
        this.btnDisabled = false;
      } else {
        this.btnDisabled = true;
      }
    },
    handleClick(field) {
      switch (field) {
        case "add":
          this.dialogVisible = true;
          break;
        case "delete":
          if (this.multipleSelection.length > 0) {
            this.$confirm(
              `确认删除选中的${this.multipleSelection.length}个设备吗?`,
              "系统提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }
            ).then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
          } else {
            this.$message.error("请选择要删除的设备!");
          }
          break;
        default:
          break;
      }
    },
    async loadDictData(dictType, targetProperty) {
      try {
        // 调用 store 中的字典查询方法，传入字典类型
        const data = await this.$store.dispatch("dict/queryDictData", dictType);
        // 根据接口返回的数据格式进行处理

        this[targetProperty] = [{ dictLabel: "所有", dictValue: "" }, ...data];
      } catch (error) {
        this.$message.error("获取数据失败");
      }
    },
    onFocus() {
      this.dialogVisibleGruop = true;
    },
    handleClickTab(tab, event) {
      this.currentTabLabel = tab.label;
      this.tableKey += 1;
    },
    handleCheckChange(checkedValues) {
      this.tableHeader.forEach((item) => {
        if (item.title === "子设备类型") {
          if (this.currentTabLabel === "全部类型") {
            item.visible = checkedValues.includes(item.prop);
          } else {
            item.visible = false;
          }
        } else {
          item.visible = checkedValues.includes(item.prop);
        }
      });
      this.tableKey += 1;
    },
    handleSearchClick() {
      console.log("搜索按钮点击");
      this.searchCardShow = !this.searchCardShow;
    },
    handleInitClick() {
      this.initTable();
    },
    handleNodeClick(data) {
      console.log(data);
    },
    hasPermission(permission) {
      return hasPermission(permission);
    },
    calculateTableHeight() {
      // 根据容器实际高度计算表格高度
      this.$nextTick(() => {
        const container = this.$refs.multipleTable.$el?.parentElement;
        if (container) {
          // 减去表头和其他元素的高度
          this.tableHeight = container.clientHeight - 120; // 120为估计的其他元素高度
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-ruleForm {
  width: 80%;
  line-height: 60px;
  margin: 0 auto;
}
// .gateway-contant {
//   display: flex;
//   height: calc(100vh - 80px);
//   position: relative;

// .gateway-contant-left {
//   height: calc(100vh - 90px);
//   margin-top: 15px;
//   margin-left: 10px;
//   position: relative;
//   overflow-y: auto;

//   .gateway-contant-left-header {
//     width: 100%;
//     height: 50px;
//     display: flex;
//     justify-content: space-between;
//     border-bottom: 1px solid #e1e1e1;
//     font-weight: 600;
//     margin-top: -20px;
//     padding-top: 20px;
//     position: sticky;
//     left: 0;
//     top: 0;
//     background-color: #fff;

//     .gateway-contant-left-header-name {
//       font-size: 16px;
//       color: #333333;
//       margin-bottom: 10px;
//     }

//     .gateway-contant-left-header-action {
//       cursor: pointer;
//     }
//   }

//   .gateway-contant-business {
//     margin: 15px 0;
//     background-color: #eff3f8;
//     .tab-itemtitle,
//     .tab-item-activetitle {
//       font-size: 15px;
//     }

//     .tab-itemtitle,
//     .tab-item-activetitle,
//     .tab-item-active,
//     .tab-item {
//       width: 260px;
//       padding: 5px 0;
//       padding-left: 10px;
//       color: #3b3d3f;
//       cursor: pointer;
//       border-bottom: 1px solid #fff;
//       line-height: 20px;
//     }

//     .tab-item-activetitle {
//       color: #165eff;
//       font-weight: 700;
//     }

//     .tab-item-active {
//       color: #165eff;
//       padding-left: 20px;
//       font-size: 15px;
//       font-weight: 700;
//     }

//     .tab-item {
//       padding-left: 20px;
//       font-size: 14px;
//     }
//   }
// }

// .device-list {
//   margin-left: 10px;
//   margin-right: 10px;
//   transition: all 0.3s ease;
// }
// .device-list-widthB {
//   width: calc(100vw - 580px);
// }
// .device-list-widthS {
//   width: calc(100vw - 260px);
// }
// }

// .left-caret {
//   width: 12px;
//   height: 40px;
//   background-color: #eff3f8;
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   position: absolute;
//   top: 50%;
//   transform: translateY(-50%);
//   cursor: pointer;
//   z-index: 10;
//   transition: left 0.3s ease;
// }

// .caret-bd-left {
//   left: 310px; // 10px margin-left + 300px width
//    border-bottom-right-radius: 5px;
//   border-top-right-radius: 5px;
// }

// .caret-bd-right {
//   left: 10px;
//   border-bottom-right-radius: 5px;
//   border-top-right-radius: 5px;
// }

// 添加过渡动画样式
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter,
.slide-leave-to {
  transform: translateX(-300px);
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
